<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="container">
			<!-- 字符串 -->
			<my-hello title="天玑不错">
				<!-- v-slot可以获取slot被绑定的属性值 -->
				<template v-slot="row">
					Hello <span style="color: aqua;">{{row.title}}</span>
				</template>
			</my-hello>

			<hr>
			<!-- 对象 -->
			<Hello :user="{name:'张三',age:20}">
				<template v-slot="scope">
					你说什么？ <span style="color: #FF0000;">{{scope.row.name}}</span>
				</template>
			</Hello>

		</div>
		<script type="text/javascript">
			var he = {
				props: ['title'],
				template: `
					<div>
						<div>{{title}}</div>
						
						<!-- 绑定title属性 -->
						<slot :title="title"></slot>
					</div>
				`
			}


			var hello = {
				props: {
					user: {
						type: Object,
						default: function() {
							return {}
						}
					}
				},
				template: `
				<div>
				 <slot v-bind:row="user"></slot>
				<div>名称：{{user.name}}</div>
			   <div>年龄：{{user.age}}</div>
				</div>
			   `
			};




			var app = new Vue({
				el: "#container",
				data: {

				},
				components: {
					"my-hello": he,
					hello
				},
			})
		</script>
	</body>
</html>
